extends ../../_layout/default.pug

block canonical
  link(rel='canonical' href='https://coreui.io/docs/components/carousel/')

block breadcrumb
  +breadcrumb(
    [
      { href: '#', label: 'Home'},
      { label: 'Components'},
      { label: 'Base'},
      'Carousel'
    ],
  )

block view
  +docs-components('https://coreui.io/docs/components/carousel/')
  .card.mb-4
    .card-header
      strong Carousel
      span.small.ms-1 Slides only
    .card-body
      p.text-body-secondary.small
        | Here’s a carousel with slides. Note the appearance of the 
        code .d-block
        |  also, 
        code .w-100
        |  on carousel images to override browser default image alignment.
      +example('https://coreui.io/docs/components/carousel/#slides-only')
        #carouselExampleSlidesOnly.carousel.slide(data-coreui-ride='carousel')
          .carousel-inner
            .carousel-item
              svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: First slide' preserveAspectRatio='xMidYMid slice' focusable='false')
                title Placeholder
                rect(width='100%' height='100%' fill='#777')
                text(x='50%' y='50%' fill='#555' dy='.3em') First slide
            .carousel-item
              svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Second slide' preserveAspectRatio='xMidYMid slice' focusable='false')
                title Placeholder
                rect(width='100%' height='100%' fill='#666')
                text(x='50%' y='50%' fill='#444' dy='.3em') Second slide
            .carousel-item.active
              svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Third slide' preserveAspectRatio='xMidYMid slice' focusable='false')
                title Placeholder
                rect(width='100%' height='100%' fill='#555')
                text(x='50%' y='50%' fill='#333' dy='.3em') Third slide
  .card.mb-4  
    .card-header
      strong Carousel
      span.small.ms-1 With controls
    .card-body
      p.text-body-secondary.small
        | Adding in the previous and next controls. We recommend using 
        code 
          = '<button>'
        |  elements, but you can also use 
        code 
          = '<a>'
        |  elements with 
        code role="button"
        | .
      +example('https://coreui.io/docs/components/carousel/#with-controls')
        #carouselExampleControls.carousel.slide(data-coreui-ride='carousel')
          .carousel-inner
            .carousel-item
              svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: First slide' preserveAspectRatio='xMidYMid slice' focusable='false')
                title Placeholder
                rect(width='100%' height='100%' fill='#777')
                text(x='50%' y='50%' fill='#555' dy='.3em') First slide
            .carousel-item
              svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Second slide' preserveAspectRatio='xMidYMid slice' focusable='false')
                title Placeholder
                rect(width='100%' height='100%' fill='#666')
                text(x='50%' y='50%' fill='#444' dy='.3em') Second slide
            .carousel-item.active
              svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Third slide' preserveAspectRatio='xMidYMid slice' focusable='false')
                title Placeholder
                rect(width='100%' height='100%' fill='#555')
                text(x='50%' y='50%' fill='#333' dy='.3em') Third slide
          button.carousel-control-prev(type='button' data-coreui-target='#carouselExampleControls' data-coreui-slide='prev')
            span.carousel-control-prev-icon(aria-hidden='true')
            span.visually-hidden Previous
          button.carousel-control-next(type='button' data-coreui-target='#carouselExampleControls' data-coreui-slide='next')
            span.carousel-control-next-icon(aria-hidden='true')
            span.visually-hidden Next
  .card.mb-4
    .card-header
      strong Carousel
      span.small.ms-1 With indicators
    .card-body
      p.text-body-secondary.small You can attach the indicators to the carousel, lengthwise the controls, too.
      +example('https://coreui.io/docs/components/carousel/#with-indicators')
        #carouselExampleIndicators.carousel.slide(data-coreui-ride='carousel')
          .carousel-indicators
            button(type='button' data-coreui-target='#carouselExampleIndicators' data-coreui-slide-to='0' aria-label='Slide 1')
            button(type='button' data-coreui-target='#carouselExampleIndicators' data-coreui-slide-to='1' aria-label='Slide 2')
            button.active(type='button' data-coreui-target='#carouselExampleIndicators' data-coreui-slide-to='2' aria-label='Slide 3' aria-current='true')
          .carousel-inner
            .carousel-item
              svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: First slide' preserveAspectRatio='xMidYMid slice' focusable='false')
                title Placeholder
                rect(width='100%' height='100%' fill='#777')
                text(x='50%' y='50%' fill='#555' dy='.3em') First slide
            .carousel-item
              svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Second slide' preserveAspectRatio='xMidYMid slice' focusable='false')
                title Placeholder
                rect(width='100%' height='100%' fill='#666')
                text(x='50%' y='50%' fill='#444' dy='.3em') Second slide
            .carousel-item.active
              svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Third slide' preserveAspectRatio='xMidYMid slice' focusable='false')
                title Placeholder
                rect(width='100%' height='100%' fill='#555')
                text(x='50%' y='50%' fill='#333' dy='.3em') Third slide
          button.carousel-control-prev(type='button' data-coreui-target='#carouselExampleIndicators' data-coreui-slide='prev')
            span.carousel-control-prev-icon(aria-hidden='true')
            span.visually-hidden Previous
          button.carousel-control-next(type='button' data-coreui-target='#carouselExampleIndicators' data-coreui-slide='next')
            span.carousel-control-next-icon(aria-hidden='true')
            span.visually-hidden Next
  .card.mb-4
    .card-header
      strong Carousel
      span.small.ms-1 With captions
    .card-body
      p.text-body-secondary.small
        | You can add captions to slides with the 
        code .carousel-caption
        |  element within any 
        code .carousel-item
        | . They can be immediately hidden on smaller viewports, as shown below, with optional 
        a(href='https://coreui.io/docs/utilities/display/') display utilities
        | . We hide them with 
        code .d-none
        |  and draw them back on medium-sized devices with 
        code .d-md-block
        | .
      +example('https://coreui.io/docs/components/carousel/#with-captions')
        #carouselExampleCaptions.carousel.slide(data-coreui-ride='carousel')
          .carousel-indicators
            button(type='button' data-coreui-target='#carouselExampleCaptions' data-coreui-slide-to='0' aria-label='Slide 1')
            button(type='button' data-coreui-target='#carouselExampleCaptions' data-coreui-slide-to='1' aria-label='Slide 2')
            button.active(type='button' data-coreui-target='#carouselExampleCaptions' data-coreui-slide-to='2' aria-label='Slide 3' aria-current='true')
          .carousel-inner
            .carousel-item
              svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: First slide' preserveAspectRatio='xMidYMid slice' focusable='false')
                title Placeholder
                rect(width='100%' height='100%' fill='#777')
                text(x='50%' y='50%' fill='#555' dy='.3em') First slide
              .carousel-caption.d-none.d-md-block
                h5 First slide label
                p Some representative placeholder content for the first slide.
            .carousel-item
              svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Second slide' preserveAspectRatio='xMidYMid slice' focusable='false')
                title Placeholder
                rect(width='100%' height='100%' fill='#666')
                text(x='50%' y='50%' fill='#444' dy='.3em') Second slide
              .carousel-caption.d-none.d-md-block
                h5 Second slide label
                p Some representative placeholder content for the second slide.
            .carousel-item.active
              svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Third slide' preserveAspectRatio='xMidYMid slice' focusable='false')
                title Placeholder
                rect(width='100%' height='100%' fill='#555')
                text(x='50%' y='50%' fill='#333' dy='.3em') Third slide
              .carousel-caption.d-none.d-md-block
                h5 Third slide label
                p Some representative placeholder content for the third slide.
          button.carousel-control-prev(type='button' data-coreui-target='#carouselExampleCaptions' data-coreui-slide='prev')
            span.carousel-control-prev-icon(aria-hidden='true')
            span.visually-hidden Previous
          button.carousel-control-next(type='button' data-coreui-target='#carouselExampleCaptions' data-coreui-slide='next')
            span.carousel-control-next-icon(aria-hidden='true')
            span.visually-hidden Next
  .card.mb-4
    .card-header
      strong Carousel
      span.small.ms-1 Crossfade
    .card-body
      p.text-body-secondary.small
        | Add 
        code .carousel-fade
        |  to your carousel to animate slides with a fade transition instead of a slide.
      +example('https://coreui.io/docs/components/carousel/#crossfade')
        #carouselExampleFade.carousel.slide.carousel-fade(data-coreui-ride='carousel')
          .carousel-inner
            .carousel-item
              svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: First slide' preserveAspectRatio='xMidYMid slice' focusable='false')
                title Placeholder
                rect(width='100%' height='100%' fill='#777')
                text(x='50%' y='50%' fill='#555' dy='.3em') First slide
            .carousel-item
              svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Second slide' preserveAspectRatio='xMidYMid slice' focusable='false')
                title Placeholder
                rect(width='100%' height='100%' fill='#666')
                text(x='50%' y='50%' fill='#444' dy='.3em') Second slide
            .carousel-item.active
              svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Third slide' preserveAspectRatio='xMidYMid slice' focusable='false')
                title Placeholder
                rect(width='100%' height='100%' fill='#555')
                text(x='50%' y='50%' fill='#333' dy='.3em') Third slide
          button.carousel-control-prev(type='button' data-coreui-target='#carouselExampleFade' data-coreui-slide='prev')
            span.carousel-control-prev-icon(aria-hidden='true')
            span.visually-hidden Previous
          button.carousel-control-next(type='button' data-coreui-target='#carouselExampleFade' data-coreui-slide='next')
            span.carousel-control-next-icon(aria-hidden='true')
            span.visually-hidden Next
  .card.mb-4
    .card-header
      strong Carousel
      span.small.ms-1 Dark variant
    .card-body
      p.text-body-secondary.small
        | Add 
        code .carousel-dark
        |  to the 
        code .carousel
        |  for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the 
        code filter
        |  CSS property. Captions and controls have additional Sass variables that customize the 
        code color
        |  and 
        code background-color
        | .
      +example('https://coreui.io/docs/components/carousel/#dark-variant')
        #carouselExampleDark.carousel.carousel-dark.slide(data-coreui-ride='carousel')
          .carousel-indicators
            button(type='button' data-coreui-target='#carouselExampleDark' data-coreui-slide-to='0' aria-label='Slide 1')
            button(type='button' data-coreui-target='#carouselExampleDark' data-coreui-slide-to='1' aria-label='Slide 2')
            button.active(type='button' data-coreui-target='#carouselExampleDark' data-coreui-slide-to='2' aria-label='Slide 3' aria-current='true')
          .carousel-inner
            .carousel-item(data-coreui-interval='10000')
              svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: First slide' preserveAspectRatio='xMidYMid slice' focusable='false')
                title Placeholder
                rect(width='100%' height='100%' fill='#f5f5f5')
                text(x='50%' y='50%' fill='#aaa' dy='.3em') First slide
              .carousel-caption.d-none.d-md-block
                h5 First slide label
                p Some representative placeholder content for the first slide.
            .carousel-item(data-coreui-interval='2000')
              svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Second slide' preserveAspectRatio='xMidYMid slice' focusable='false')
                title Placeholder
                rect(width='100%' height='100%' fill='#eee')
                text(x='50%' y='50%' fill='#bbb' dy='.3em') Second slide
              .carousel-caption.d-none.d-md-block
                h5 Second slide label
                p Some representative placeholder content for the second slide.
            .carousel-item.active
              svg.docs-placeholder-img.docs-placeholder-img-lg.d-block.w-100(width='800' height='400' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='Placeholder: Third slide' preserveAspectRatio='xMidYMid slice' focusable='false')
                title Placeholder
                rect(width='100%' height='100%' fill='#e5e5e5')
                text(x='50%' y='50%' fill='#999' dy='.3em') Third slide
              .carousel-caption.d-none.d-md-block
                h5 Third slide label
                p Some representative placeholder content for the third slide.
          button.carousel-control-prev(type='button' data-coreui-target='#carouselExampleDark' data-coreui-slide='prev')
            span.carousel-control-prev-icon(aria-hidden='true')
            span.visually-hidden Previous
          button.carousel-control-next(type='button' data-coreui-target='#carouselExampleDark' data-coreui-slide='next')
            span.carousel-control-next-icon(aria-hidden='true')
            span.visually-hidden Next

